<script>
    require.config({
        paths: {
            {{ config_items | join(', ') }}
        }
    });
</script>

{% for chart in charts %}
    <div id="{{ chart.chart_id }}" style="width:{{ chart.width }}; height:{{ chart.height }};"></div>
{% endfor %}


<script>
    require([{{ libraries | join(', ') }}], function(echarts) {
    {% for c in charts %}
        var chart_{{ c.chart_id }} = echarts.init(
            document.getElementById('{{ c.chart_id }}'), '{{ c.theme }}', {renderer: '{{ c.renderer }}'});
        {% for js in c.js_functions.items %}
            {{ js }}
        {% endfor %}
        var option_{{ c.chart_id }} = {{ c.json_contents }};
        chart_{{ c.chart_id }}.setOption(option_{{ c.chart_id }});
        {% if c._is_geo_chart %}
            var bmap = chart_{{ c.chart_id }}.getModel().getComponent('bmap').getBMap();
            bmap.addControl(new BMap.MapTypeControl());
        {% endif %}
    {% endfor %}
    });
</script>
